XHTML Forms

Slides: OpenOffice PowerPoint
Reading: HFHTML Ch. 14

Tools

The Zen Garden.

XHTML to PDF translator: Prince 8.0 download.

FTP clients: FileZilla, FireFTP, and Net2FTP

To validate your CSS files: http://jigsaw.w3.org/css-validator.
To valicate your XHTML: http://validator.w3.org.

There will be an in class exam a week from today (11/3/11). Here is a practice exam.

Lab, part I

• Here is the code for chapter 14 from the text's web site.
• Download and unzip it into your My Documents directory (or onto your thumb-drive).
• In the contest directory open the form.html with your browser. Try to enter the contest. Examine the form.html and the contest.php files with a text editor.
• Follow the instructions in the text to
  1. Complete the Starbuzz Bean Machine order form.
  2. Organize it as a table.
  3. Style it with a style sheet.
• Validate your CSS files using the CSS validator: http://jigsaw.w3.org/css-validator
• Validate your XHTML files using the XHTML validator: http://validator.w3.org.
• (Optional) add the indicated icon web pages.
• (If you haven't already), transfer the folders for today&s;s lab to your thumb drive.
• Create a hyperlink from your labs directory's index.html to the web pages you worked on today.

Lab, part II

In the about me site on your thumb drive:

• Add a sandwich order page to your about me site with the following fields:
  1. first name (firstname)
  2. last name (lastname)
  3. type of bread (bread)
  4. toasted or not (cookingInst)
  5. choice of filling (filling)
  6. extras (extras[])
  7. a text area for comments and special instructions (comments)
  Items 3, 4, and 5 should admit only one answer (use radio buttons or a pull-down menu). Item 6 should allow more than one answer (use a checkbox).
  The web application for processing the form is located at: http://comet.lehman.cuny.edu/stjohn/teaching/cis228/sandwich/order.php
• Use a table to organize your form.
• Use a style sheet to give it a distinctive touch.
• Verify that sandwich orders are being processed.
• Validate your CSS file using the CSS validator: http://jigsaw.w3.org/css-validator
• Validate your sandwich order page using the XHTML validator: http://validator.w3.org.
• Add the appropriate icon(s) to your order page.

Lab, part III

• Using an FTP client, synchronize your web site to the image on your thumbdrive.

Always shut down your computer and turn off your display before leaving the lab.